$(function () {

    //   1、首页渲染
           // a、首页数据渲染
           // b、Ajax去后台获取用户数据
           // c、用模板引擎渲染返回的数据

    //   2、禁用启动
       // a- 点击按钮，获取当前数据id， 获取要进行的操作 ，弹出模态框  
       // b- 用户点击确定按钮时，通过ajax请求后台，进行对应操作 
       // c- 页面重新渲染， 模态框隐藏  看到操作后结果

    //   3、分页
        // 1- 先去后台 获取所有的数据总数， 根据总数算出数据的总页数 
        // 共有81条数据  一页10条 ：   总页码 = Math.ceil(数据总数 / 每页数据条数)
        // 2- 根据总页码 来动态生成分页标签 (用插件来实现)
        // total 表示数据库数据总数 


    //   1、首页渲染

    var currentPage = 1;//记录当前页面
    var pageSize = 3;    //每页数据条数

    // a、首页数据渲染
    // b、Ajax去后台获取用户数据
    // c、用模板引擎渲染返回的数据


    // a、首页数据渲染

    function render() {
        $.ajax({
            type: 'get',
            url: '/user/queryUser',
            data: {
                page: currentPage,
                pageSize: pageSize,
            },
            dataType: 'json',
            success: function (res) {
                console.log(res);
                $('tbody').html(template('tmp', res))
                  // 根据后台返回的res.total ,动态生成分页标签
                setPage(res.total);
            }

        })
    }
    render();

    // b、Ajax去后台获取用户数据

    //点击按钮获取id，获取要进行的操作，弹出模态框
    var id = null; //存放ID
    var isDelete = null; // 存放用户要进行的操作
    $('tbody').on('click', '.btn', function () { //动态生成事件委托事件
        //  id = $(this).parent().attr('data-id');
        id = $(this).parent().data('id');//获取id
        isDelete = $(this).hasClass('btn-danger') ? 0 : 1;
        //  console.log(id);
        //  console.log(isDelete);
    })

    // c、用模板引擎渲染返回的数据
    //向后台发送数据,进行对应操作，页面从新渲染，隐藏模态框
   $('.btn-ok').click(function () {
     $.ajax({
     type: 'post',
     url: '/user/updateUser',
     data:{
      id:id,
      isDelete:isDelete,
     },
     dataType: 'json',
     success: function (res) {
         console.log('res');
        //  页面从新渲染
        render();
        // 隐藏模态框
        $('.modal-user').modal('hide');
       }
     })   
   })


    //   3、分页
        // 1- 先去后台 获取所有的数据总数， 根据总数算出数据的总页数 
        function setPage(total) {
            //生成分页标签
            $("#paginator").bootstrapPaginator({
                bootstrapMajorVersion: 3,//默认是2，如果是bootstrap3版本，这个参数必填
                currentPage: currentPage,//当前页
                totalPages: Math.ceil(total / pageSize),//总页数
                onPageClicked: function (event, originalEvent, type, page) {
                  //为按钮绑定点击事件   page:当前点击的页码
                 console.log('page:', page);
                //  1、改变当前页面
                currentPage = page;
                // 重新渲染
                render();

        }
    });
    }
})